<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 数据监控</el-breadcrumb-item>
                <el-breadcrumb-item>表盘SQL设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <el-col :span="2"><el-button @click="handleCreate">新建</el-button></el-col>
                <el-col :span="2"><span>监控内容：</span></el-col>
                <el-col :span="3"><el-input v-model="searchKey"></el-input></el-col>
                <el-col :span="2"><span>数据源：</span></el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择" v-model="connectId" clearable>
                        <el-option
                            v-for="item in sourceList"
                            :key="item.createTime"
                            :label="item.connectName"
                            :value="item.rowId"
                        ></el-option>
                    </el-select> 
                </el-col>
                <el-col :span="2"><span>表盘类型：</span></el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择" v-model="typeId" clearable>
                        <el-option
                            v-for="item in typeList"
                            :key="item.rowId"
                            :label="item.name"
                            :value="item.rowId"
                        ></el-option>
                    </el-select> 
                </el-col>
                <el-col :span="2" :offset="1"><el-button type="primary" @click="handleCheck">查找</el-button></el-col>
                <el-col :span="2" :offset="1" style="width: 60px">
                    <a :href="exportUrl" class="exportLink"  target="_blank" :style="{background:maincolor||'#5a6775'}">导出</a>
                </el-col>
            </el-row>
            <el-table
                :data="sqlList"
                border
                v-loading="loading"
                style="width: 100%; margin-top:20px">
                <el-table-column
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="dashBoardSqlEntity.title"
                    label="监控内容"
                >
                </el-table-column>
                <el-table-column
                    prop="connectionInfoEntity.connectName"
                    label="数据源"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="dashBoardSqlEntity.typeName"
                    label="类型">
                </el-table-column>
                <el-table-column
                    prop="scheduleInfoEntity.title"
                    label="任务调度">
                </el-table-column>
                <el-table-column
                    prop="dashBoardSqlEntity.scheduleFlag"
                    label="调度"
                    width="50"
                >
                </el-table-column>
                <el-table-column
                    prop="dashBoardSqlEntity.emailSendFlag"
                    label="邮件"
                    width="50"
                >
                </el-table-column>
                <el-table-column
                    prop="dashBoardSqlEntity.pushFlag"
                    label="即时通讯"
                    width="80"
                >
                </el-table-column>
                <el-table-column
                    prop="dashBoardSqlEntity.imSendTypeLable"
                    label="通讯发送选项">
                </el-table-column>
                <el-table-column
                    prop="dashBoardSqlEntity.imUserInfo"
                    label="通讯帐号手工">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <a @click="handleClick(scope.row)" class="mr15">编辑</a>
                        <a @click="delRow(scope.row)">删除</a>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_container">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="threadNum"
                    layout="total, prev, pager, next, jumper"
                    :total="totalNum">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
import utils from '../../utils/index.js'
export default {
  data() {
    return {
      exportUrl: "",
      connectId:"",
      searchKey: "",
      currentPage:1,
      loading: true,
      typeId:"",
      threadNum: parseInt(localStorage.getItem('pagesize')),
      imUserIdParseVal:[{
          value: '0',
          label: '使用帐号关联'
      },{
          value: '1',
          label: '使用USER_ID映射'
      },{
          value: '-1',
          label: '不使用关联映射'
      }],
    };
  },
  created() {
      if(this.$route.params.typeId) {
        this.getSqlList(null,null,this.$route.params.typeId);
      }else{
          this.getSqlList();
      }
  },
  mounted() {
      if(localStorage.getItem('pageType') == 0) {
            this.$router.push({ path:'/user' });
      }
    this.getSourceList();
    this.getTypeList();
    this.exportUrl = utils.apiUrl + '/export/dashboard?sessionId=' + localStorage.getItem('sessionId') + '&connectId=' + this.connectId + '&searchKey=' + this.searchKey;
  },
  computed: mapState({
    msg: state => state.sql.msg,
    sourceList: state => state.sql.sourceList,
    totalNum: state => state.sql.totleNum2,
    verifyCode: state => state.system.verifyCode,
    maincolor: state => state.system.colors,
    sqlList(state){
        let arr = [];
        state.sql.sqlList.map((item) => {
            item.dashBoardSqlEntity.pushFlag = item.dashBoardSqlEntity.pushFlag?"Y":"N";
            item.dashBoardSqlEntity.scheduleFlag = item.dashBoardSqlEntity.scheduleFlag?"Y":"N";
            item.dashBoardSqlEntity.emailSendFlag = item.dashBoardSqlEntity.emailSendFlag?"Y":"N";
            if(typeof(item.dashBoardSqlEntity.imSendType) == 'number') {
                if(item.dashBoardSqlEntity.imSendType == -1) {
                    item.dashBoardSqlEntity.imSendTypeLable = '不使用关联映射';
                }else{
                    let imSendTypeLable = item.dashBoardSqlEntity.imSendType.toString();
                    item.dashBoardSqlEntity.imSendTypeLable = this.imUserIdParseVal[imSendTypeLable].label;
                }
            }else{
                item.dashBoardSqlEntity.imSendTypeLable = null;
            }
            arr.push(item);
        });
        return arr;
    },
    typeList(state) {
        let arr = [];
        state.sql.typeList.map((item) => {
            if(item.openFlag == true) {
                arr.push(item);
            }  
        });
        return arr;
    }
  }),
  methods: {
    getColor() {
        this.$store.dispatch("getColor", {
            sessionId: localStorage.getItem('sessionId')
        })
    },
    handleCurrentChange(val) {
        this.$store.dispatch('getSqlList',{
            pageNo: val,
            pageSize: this.threadNum,
            sessionId: localStorage.getItem('sessionId'),
        })
    },
    handleClick(row) {
      this.$router.push({ name:'newsql', params: {rowId:row.dashBoardSqlEntity.rowId}}) 
    },
    delRow(row) {
      this.$confirm('确定删除？','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
       }).then(() => {
            this.loading = true;
            this.$store.dispatch('delSql',{
                rowId: row.dashBoardSqlEntity.rowId,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                this.getSqlList();
            })
            }).catch(() => {
                this.$message('已取消删除');
            })
    },
    handleCreate() {
      this.$router.push({ path: "/newsql" });
    },
    getSourceList() {
      this.$store.dispatch("getSourceList", {
        pageNo: 1,
        pageSize: 99,
        sessionId: localStorage.getItem("sessionId")
      });
    },
    getSqlList(key,id, typeId) {
        this.$store.state.sql.sqlList = [];
        this.$store.dispatch('getSqlList', {
            searchKey:key || null,
            connectId:id || null,
            typeId: typeId || null,
            pageNo:1,
            pageSize: this.threadNum,
            sessionId: localStorage.getItem('sessionId')
        }).then(() => {
            if(this.msg !== '成功') {
                this.loading = false;
                this.$message(this.msg)
            }else{
                this.loading = false;
            }
        })
    },
    getTypeList() {
        this.$store.dispatch('getTypeList',{
            pageSize: 9999,
            sessionId: localStorage.getItem('sessionId')
        })
    },
    handleCheck() {
        this.loading = true;
        let searchKey = this.searchKey || null;
        let connectId = this.connectId || null;
        let typeId = this.typeId || null;
        this.getSqlList(searchKey, connectId, typeId);
        this.exportUrl = utils.apiUrl + '/export/dashboard?sessionId=' + localStorage.getItem('sessionId') + '&connectId=' + this.connectId + '&searchKey=' + this.searchKey;
    }
  }
};
</script>
<style scoped>
.el-table .cell{
    height: 22px;
}
.el-table th>.cell{
    height: 22px;
}
</style>


